<template>
  <div id="root">
    <NavBar>全部主题景点</NavBar>
    <div class="page-tfour">
      <router-link v-for="a in arr" :key="a.title" :to="'/my/viewlist/'+a.title">
        <div class="page-item">
          <img :src="'/static/img/theme/'+a.img">
          <div class="inner">
            <p>{{a.title}}</p>
            <div>{{a.intro}}</div>
          </div>
        </div>
      </router-link>

      <div id="last">
        <div></div>
        <span>客官，所有主题都在这了！</span>
        <div></div>
      </div>

      <BottomBar></BottomBar>
    </div>
   
      
      


  </div>
</template>

<script>
import BottomBar from '../components/BottomBar.vue';
import NavBar from '../components/NavBar.vue';

export default {
  data:function(){
    return {
      arr:[
        {img:"zrfj.jpg",title:"自然风景",intro:"游山河湖海，赏落日飞雪，每一处映入眼帘的天地辽阔，都是大自然的鬼斧神工。"},
        {img:"dyqs.jpg",title:"岛屿潜水",intro:"海底缤纷美丽的大千世界，远比海上更波澜壮观，让人惊喜连连。"},
        {img:"wqsl.jpg",title:"温泉水疗",intro:"让身心完全的放松，洗去一天的疲惫，一起来约泡吧！"},
        {img:"ztly.jpg",title:"主题乐园",intro:"为你量身定制的快乐之旅，弱水三千，只取一瓢。"},
        {img:"rwjz.jpg",title:"人文建筑",intro:"精神文明结合建筑艺术，思想与科技完美碰撞的火花。"},
        {img:"msgj.jpg",title:"名胜古迹",intro:"切身感受历史的气势磅礴，读万卷书，不如行万里路。"},
        {img:"pltx.jpg",title:"漂流探险",intro:"激流勇进，破釜沉舟，我们的征途，不畏艰难险阻。"},
        {img:"zlyc.jpg",title:"展览演出",intro:"一生必看一次的演出，大型实景展览，舞台灯光效果震撼。"},
        {img:"hxbd.jpg",title:"滑雪冰雕",intro:"晶莹别致的冰雪奇观，冰上起舞的英姿飒爽。"},
        {img:"ssyl.jpg",title:"水上娱乐",intro:"轻奢主义的极限享受，乘游轮出海，兜快艇之风。"},
        {img:"mzzj.jpg",title:"民族宗教",intro:"返璞归真的心灵净土，虔诚朝圣的民族文化。"},
        {img:"hbfj.jpg",title:"海滨风景",intro:"美女如云的热带天堂，这里有碧海蓝天，还有沙滩比基尼。"},
      ],
    }
  },
  components:{
    BottomBar,
    NavBar
  },
  computed:{
    
  },
  methods:{
   
  },
  mounted:function(){

  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  #root{
    width:100vw;
  }
  .page-item{
    display:flex;
    align-items:center;
    border-bottom:solid 1px #dedede;
  }
  .page-item img{
    width:85px;
    height:85px;
    margin-left:8px;
  }
  .inner{
    margin-left:8px;
    flex-grow:1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .inner p{
    font-size:15px;
    color:#4a4a4a;
  }
  .inner div{
    padding-right:8px;
    font-size:14px;
    color: #bbbbbb;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #last{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin:20px 0;
  }
  #last div{
    height:1px;
    flex-grow:1;
    background-color:#AFAFAF;
  }
  #last span{
    margin:0 6px;
    font-size:12px;
    color:#AAAAAA;
  }
  a{
    text-decoration:none;
  }
</style>
